<template>
  <div>

    <myheader></myheader>

		<section class="products text-center">
			<div class="container">
				<h3 class="mb-4">商品检索</h3>
				<div class="row">
					<div v-for="item in goodslist" class="col-sm-6 col-md-3 col-product">
						<figure>
							<img class="rounded-corners img-fluid" :src="src+item.img"	width="240" height="240">
							<figcaption>
								<div class="thumb-overlay"><a href="item.html" title="More Info">
									<i class="fas fa-search-plus"></i>
								</a></div>
							</figcaption>
						</figure>
						<!--<h4>-->
            <!--<a class="highlight" :href="'http://127.0.0.1:8080/item?id='+item.id">{{item.name}}-->
              <!--<div v-html="item.name"></div>-->
            <!--</a></h4>-->
            {{item.name | myfilter}}
						<p><span class="emphasis">${{item.price}}</span></p>
					</div>
          <br>

          <!--自主分页-->
          <div>
            <a @click="getdata(1)">首页</a>
            <button @click="getdata(lastpage)" v-show="lastpage">上一页</button>
            <!--<ul>-->
              <!--<li v-for="index in all">-->
                <!--<a @click="getdata(index)">{{ index }}</a>-->
              <!--</li>-->
            <!--</ul>-->


            <a @click="getdata(page)">当前页：{{page}}</a>


            <button @click="getdata(nextpage)" v-show="nextpage">下一页</button>
            <a @click="getdata(all)">尾页</a>

          </div>

				</div>
			</div>
		</section>



    <mytail></mytail>

  </div>

</template>



<script>
  import myheader from './myheader'
import mytail from './mytail'

    export default {
        name: "search",
      data () {
        return {
            //搜索关键词
            text:'',

            // // 自主分页
            total:5, //商品总数
            page:1,//当前页
            all:0,//总页数
            lastpage:0,//上一页
            nextpage:0,//下一页
            size:5, //每页显示数量


            //商品列表
            goodslist:[],

            src:'http://127.0.0.1:8000/static/upload/',

            msg: "这是一个变量",

            }
          },
            //注册组件标签
          components:{
              'myheader': myheader,
              'mytail': mytail,
          },
      //自定义过滤器
      filters:{
        myfilter:function (value) {
          console.log(window.that.text);

            value = value.replace(new RegExp(window.that.text, 'g'), '<span class="highlight">'+window.that.text+'</span>');
            return value
        }
      },

      mounted:function(){
          //传递公共变量
          window.that = this;

        //route 接收router传递的参数
        let text = this.$route.query.text;
        // console.log(text);
        //赋值
        this.text = text;

        this.get_goods();

        // this.getdata(1);


    },
      methods:{


        //自主分页接口
        getdata:function(page){ // page页码

          //分页手动赋值
          this.page=page;

          // 发送请求
            this.axios.get(
              'http://127.0.0.1:8000/goodslist/',{params:{page:page,size:this.size, coloum:this.coloum, order:this.order}}).then(res=>{
                console.log(res);
                this.goodslist = res.data.data;

                //商品总数
                this.total = res.data.total;

                //判断上一页
                if(page === 1){
                  this.lastpage = 0
                }else {
                  this.lastpage = page - 1;
                }

                //计算总页数  Math.ceil向上取整
                this.all = Math.ceil(res.data.total / this.size);

                //判断下一页
                if(page === this.all){
                  this.nextpage = 0;
                }else {
                  this.nextpage = page + 1;
                }

            });
        },

        //获取商品
        get_goods: function () {

              //发送请求
              this.axios.get('http://localhost:8000/goodslist/', {params:{text: this.text}}).then((result) => {
                console.log(result);

                // 高量
                // for (let i=0; i<result.data.data.length; i++){
                //   result.data.data[i]['name'] = result.data.data[i]['name'].replace(new RegExp(this.text, 'g'), '<span class="highlight">'+this.text+'</span>');
                //
                // }
                // console.log(result.data.data);

                this.goodslist = result.data.data;

                // this.pagination.total = result.data.totol;
              });

            },

      }
    }


</script>

<style scoped>
.highlight{
  color:red;
}
</style>
